{% extends 'charts/base.html' %}

{% block options %}
    <ul class="nav ace-nav">
        <li>
            <button class="btn btn-purple btn-sm" id="open_code_f10_btn" type="button">F10资料</button>
        </li>
        <li>
            <button class="btn btn-purple btn-sm" id="add_order_btn" type="button">图表订单</button>
        </li>
        <li>
            <div class="dropdown">
                <button class="btn btn-sm btn-pink dropdown-toggle" type="button" id="add_zixuan_menu"
                        data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="true">
                    <i class="ace-icon fa fa-heart"></i>
                    自选
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" id="zixuan_zx_names" aria-labelledby="add_zixuan_menu">
                    <li>
                        <div class="checkbox">
                            <label>
                                <input name="form-field-checkbox" type="checkbox" class="ace">
                                <span class="lbl">我的持仓</span>
                            </label>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <button class="btn btn-sm btn-purple" id="show_datu" type="button" value="0">切换到大图</button>
        </li>
        <li>
            <button class="btn btn-sm btn-purple" id="shuaxin" type="button" value="0">开启自动刷新</button>
        </li>
        <li>
            <button class="btn btn-sm btn-purple" type="button" id="import_stocks">导入股票代码</button>
        </li>
        <li>
            <form class="form-search" style="width: 235px;">
                <div class="input-group">
                    <input type="text" class="form-control search-query" id="search_code" placeholder="代码搜索"
                           style="height: 42px;"/>
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-purple btn-sm" id="stock_ok" style="margin-top: -13px;">Show</button>
                    </span>
                </div>
            </form>
        </li>
    </ul>
{% endblock %}

{% block sidebar %}
    <div class="tabbable">
        <ul class="nav nav-tabs" id="myTab">
            <li class="active">
                <a data-toggle="tab" href="#tab-stocks" aria-expanded="true">
                    股票列表
                </a>
            </li>

            <li class="">
                <a data-toggle="tab" href="#tab-jhs" aria-expanded="false">
                    机会列表
                </a>
            </li>
        </ul>

        <div class="tab-content">
            <div id="tab-stocks" class="tab-pane fade active in">
                <div class="btn-group btn-corner">
                    {% for zx in zx_list %}
                        <button class="btn btn-sm btn-info btn_zixuan"
                                data-zxname="{{ zx.name }}">{{ zx.short_name }}</button>
                    {% endfor %}
                </div>
                <div class="from-group">
                    <input class="form-control" id="stock_search" placeholder="Search" type="text"/>
                </div>

                <div class="stocks_list">
                    <div>
                        <ul class="nav nav-list" id="my_stocks">

                        </ul><!-- /.nav-list -->
                    </div>
                </div>
            </div>

            <div id="tab-jhs" class="tab-pane fade">
                <div class="stocks_list">
                    <ul class="list-group" id="jhs_ul">
                        <li class="list-group-item">Loading</li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
    <div>
        <p>行业信息：<span class="hy_list"></span></p>
        <p>概念信息：<span class="gn_list"></span></p>
    </div>

    {% include 'charts/order_opt.html' with market='a' %}

{% endblock %}

{% block content %}
    {# 选项设置 #}
    <div class="ace-settings-container" id="ace-settings-container">
        <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
            <i class="ace-icon fa fa-tachometer bigger-130"></i>
        </div>

        <div class="ace-settings-box clearfix chart_setting" id="ace-settings-box">

        </div><!-- /.ace-settings-box -->
    </div><!-- /.ace-settings-container -->

    <div class="row" style="margin-left: -4px;">
        <div id="kline_high" class="kline_chart"
             style="float:left;width: calc(100% - 56px);height:100px;min-height: 320px;"></div>
        <div class="btn-toolbar" role="toolbar" aria-label="配置选项"
             style="float:right; margin-top: 40px; width: 55px;height:320px;max-width: 55px;min-width: 55px;">
            <div class="btn-group btn-group-vertical btn-group-xs btn-corner" role="group" id="zq_high">
                {% for zq, name in support_frequencys.items %}
                    <button type="button" class="btn btn-xs btn-default" data-zq="{{ zq }}">{{ name }}</button>
                {% endfor %}
            </div>
        </div>
    </div>
    <hr style="margin-top: 2px; margin-bottom: 2px;"/>
    <div class="row" style="margin-left: -4px;">
        <div id="kline_low" class="kline_chart"
             style="float:left;width: calc(100% - 56px);height:100px;min-height: 320px;"></div>
        <div class="btn-toolbar" role="toolbar" aria-label="配置选项"
             style="float:right; width: 55px;height:320px;max-width: 55px;min-width: 55px;">
            <div class="btn-group btn-group-vertical btn-group-xs btn-corner" role="group" id="zq_low">
                {% for zq, name in support_frequencys.items %}
                    <button type="button" class="btn btn-xs btn-default" data-zq="{{ zq }}">{{ name }}</button>
                {% endfor %}
            </div>
        </div>
    </div>

    {% include 'charts/order_opt.html' with market='a' %}

{% endblock %}


{% block js %}
    <script type="text/javascript">
        $(
            function () {
                var chart_div_high = getClientHeight() - 58;

                $('.stocks_list').ace_scroll({
                    size: 600
                });

                var market = 'a';
                var code = '{{default_code}}';
                var name = '';
                var frequency_high = 'd';
                var frequency_low = '30m';
                var cookie_pre = '_a'
                var intervalId = undefined; // 定时任务执行ID
                var url = window.location.href;
                if (url.split('#').length === 2) {
                    code = url.split('#')[1]
                }
                // 图表对象
                var chart_high = echarts.init(document.getElementById('kline_high'), 'dark', {renderer: 'canvas'});
                var chart_low = echarts.init(document.getElementById('kline_low'), 'dark', {renderer: 'canvas'});

                // 批量导入股票列表
                $('#import_stocks').click(function () {
                    var json = prompt('请输入股票列表 JSON 数据：');
                    if (json === '') {
                        return false;
                    }
                    var stocks = eval('(' + json + ')')
                    $('#my_stocks').html('');
                    for (var i = 0; i < stocks.length; i++) {
                        var stock = stocks[i];
                        $('#my_stocks').append('<li class="code" data-code="' + stock['code'] + '" data-name="' + stock['name'] + '"><a href="#' + stock['code'] + '"><span class="menu-text">' + stock['code'] + ' / ' + stock['name'] + '</span></a></li>');
                    }
                    $('#stock_search').quicksearch('#my_stocks li');
                    return true;
                });

                // 板块点击事件
                $("body").delegate('.plate', 'click', function () {
                    var hy_code = $(this).attr('data-hycode');
                    $.ajax({
                        type: "GET",
                        url: "/stock/plate_stocks?code=" + hy_code,
                        dataType: 'json',
                        success: function (result) {
                            if (result['code'] == 200) {
                                $('#my_stocks').html('');
                                for (var i = 0; i < result['data'].length; i++) {
                                    var stock = result['data'][i];
                                    $('#my_stocks').append('<li class="code" data-code="' + stock['code'] + '" data-name="' + stock['name'] + '"><a href="#' + stock['code'] + '"><span class="menu-text">' + stock['code'] + ' / ' + stock['name'] + '</span><span class="menu-rate">--</span></a></li>');
                                }
                                $('#stock_search').quicksearch('#my_stocks li');
                                stock_update_rates();
                            }
                        }
                    });
                });
                // 打开 F10 页面
                $('#open_code_f10_btn').click(function () {
                    var url = 'http://emweb.securities.eastmoney.com/OperationsRequired/Index?type=web&code=' + code.replace('.', '').toLowerCase();
                    window.open(url);
                });

                // 全局js
                {% include 'charts/fun.js' %}
                {% include 'charts/global.js' %}

                // 缠论配置项
                {% include 'charts/options.js' %}

                // 新增订单
                {% include 'charts/order_opt.js' %}

                // 自动触发一次
                $('.btn_zixuan')[0].click();
                query_cl_chart_config(market, code);
                fetchKlinesData(chart_high, market, code, frequency_high, true);
                fetchKlinesData(chart_low, market, code, frequency_low, true);
                zixuan_code_query_zx_names(market, code);
                stock_plate(code);
                // 机会列表
                jhs_list_show();
                setInterval(jhs_list_show, 60000);
            }
        );
    </script>
{% endblock %}